<template>
  <div class="order-detail wrapper_1200">
    <div class="header">
      <nuxt-link to="/">{{$t(`page.store.index`)}}></nuxt-link>
      <nuxt-link :to="{ path: '/users/order_list', query: { menuCur: 111 } }">{{$t(`page.users.userInfo.personalCenter`)}}></nuxt-link>
      <span>{{ $t(`page.orderDetails.navTitle`) }}</span>
    </div>
    <!--流程-->
    <div class="section process mb15">
      <div class="section-hd presell-hd">
        <div v-show="orderStatus === 0" class='state'>{{ $t(`page.user.orderStatus[0].name`) }}</div>
        <div class='state'>{{ orderStatusFilter(orderInfo.status) }}</div>
      </div>
      <div class="stepsBox">
        <el-steps :active="activeStatus" align-center>
          <el-step :title="$t(`page.user.orderStatus[0].name`)">
            <i class="iconfont icon-daifukuan1" slot="icon"></i>
          </el-step>
          <el-step :title="$t(`page.user.orderStatus[1].name`)">
            <i class="iconfont icon-daifahuo1" slot="icon"></i>
          </el-step>
          <el-step :title="$t(`page.user.orderStatus[2].name`)">
            <i class="iconfont icon-daishouhuo1" slot="icon"></i>
          </el-step>
          <el-step :title="$t(`page.user.orderStatus[5].name`)">
            <i class="iconfont icon-wancheng" slot="icon"></i>
          </el-step>
        </el-steps>
      </div>
    </div>
    <!--订单信息-->
    <div class="section mb15">
      <div class="section-hd">{{ $t(`page.orderDetails.orderInfo`) }}</div>
      <div class="section-bd">
        <ul>
          <li class="acea-row row-middle">
            <div>{{ $t(`page.orderDetails.orderId`) }}：</div>
            <div>{{ isGoodsReturn ? orderInfo.merOrderNo : orderInfo.orderNo }} <el-button style="margin-left: 30px;" type="primary" size="mini" @click.stop="_copy(isGoodsReturn ? orderInfo.merOrderNo : orderInfo.orderNo)">{{ $t(`page.orderDetails.copy`) }}</el-button></div>
          </li>
          <li class="acea-row row-middle">
            <div>{{ $t(`page.orderDetails.orderTime`) }}：</div>
            <div>{{ orderInfo.createTime }}</div>
          </li>
          <li v-if="orderInfo.refundTime" class="acea-row row-middle">
            <div>{{ $t(`page.orderDetails.refundTime`) }}：</div>
            <div>{{ orderInfo.refundTime }}</div>
          </li>
          <li v-if="!isGoodsReturn" class="acea-row row-middle">
            <div>{{ $t(`page.orderDetails.payStatus`) }}：</div>
            <div v-if="orderInfo.payType==='offline'&& orderStatus === 0">{{ offlinePayStatusName[orderInfo.offlinePayStatus] }}</div>
            <div v-else>{{ orderInfo.paid ? $t(`page.orderDetails.payTrue`) : $t(`page.orderDetails.payFalse`) }}</div>

          </li>
          <li v-if="!isGoodsReturn" class="acea-row row-middle">
            <div>{{ $t(`page.orderDetails.payType`) }}：</div>
            <div>{{ orderInfo.payType }}</div>
          </li>
          <li v-if="orderInfo.userRemark" class="acea-row">
            <div>{{ $t(`page.orderDetails.message`) }}：</div>
            <div>{{ orderInfo.userRemark }}</div>
          </li>
          <li v-if="!isGoodsReturn" class="acea-row row-middle">
            <div>{{ $t(`page.orderDetails.actualPayment`) }}：</div>
            <div class="money"><statistic :value="orderInfo.payPrice" :currency="orderInfo.currency"/></div>
          </li>
          <li v-else class="acea-row row-middle">
            <div>{{ $t(`page.users.userReturnList.total`) }}：</div>
            <div class="money"><statistic :value="orderInfo.refundPrice" :currency="orderInfo.currency"/></div>
          </li>
        </ul>
      </div>
    </div>
    <!--收货信息-->
    <div class="section mb15">
      <div class="section-hd">{{ $t(`page.orderDetails.receivingInfo`) }}</div>
      <div class="section-bd">
        <ul>
          <li class="acea-row row-middle">
            <div>{{ $t(`page.orderDetails.name`) }}：</div>
            <div>{{ orderInfo.realName }}</div>
          </li>
          <li class="acea-row row-middle">
            <div>{{ $t(`page.orderDetails.phone`) }}：</div>
            <div>{{ orderInfo.userPhone }}</div>
          </li>
          <li class="acea-row">
            <div>{{ $t(`page.orderDetails.address`) }}：</div>
            <div>{{ orderInfo.userAddress }}</div>
          </li>
        </ul>
      </div>
    </div>

    <!--物流信息-->
    <div v-if="Number(orderInfo.status) > 0" class="section mb15">
      <el-collapse>
        <el-collapse-item name="1" :disabled="expressList.length === 0">
          <template slot="title">
            <span style="margin-left: 30px;">{{ $t(`page.users.logistics.expName`) }}： {{ expressInfo.expName }}</span>
            <span style="margin-left: 30px;">{{ $t(`page.users.logistics.expNo`) }}：{{ expressInfo.expNo }}</span>
          </template>
          <div class='logisticsCon'>
            <div class='item' v-for="(item, index) in expressList" :key="index">
              <div class='iconfont icon-a-bianzu2 circular' :class='index === 0 ? "on" : ""'>
              </div>
              <div class='text' :class='index === 0 ? "on-font on" : ""'>
                <div>{{ item.AcceptStation }}</div>
                <div class='data' :class='index === 0 ? "on-font on" : ""'>{{ item.AcceptTime }}</div>
              </div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>

    <!--收款信息-->
    <div class="section mb15" v-if="orderInfo.payType === 'offline'&&orderStatus === 0">
      <div class="section-hd">{{ $t(`page.orderDetails.paymentInfo`) }}</div>
      <div class="section-bd" style="line-height: 28px;">
        <ul>
          <li class="acea-row  row-middle">
            <div>{{ $t(`page.orderDetails.bank`) }}：</div>
            <div>{{ offlinePayConfig.offline_bank_name }}</div>
          </li>
          <li class="acea-row row-middle">
            <div>{{ $t(`page.orderDetails.account`) }}：</div>
            <div>{{ offlinePayConfig.offline_bank_receive_name }} <el-button style="margin-left: 30px;" type="primary" size="mini" @click="_copy(offlinePayConfig.offline_bank_receive_name)">{{ $t(`page.orderDetails.copy`) }}</el-button></div>
          </li>
          <li class="acea-row">
            <div>{{ $t(`page.orderDetails.accountNmuber`) }}：</div>
            <div>{{ offlinePayConfig.offline_bank_card_no }} <el-button style="margin-left: 30px;" type="primary" size="mini" @click.stop="_copy(offlinePayConfig.offline_bank_card_no)">{{ $t(`page.orderDetails.copy`) }}</el-button></div>
          </li>
          <li class="acea-row" v-show="orderInfo.offlinePayFailMessage">
            <div>{{ $t(`page.orderDetails.note`) }}：</div>
            <div>{{orderInfo.offlinePayFailMessage}}</div>
          </li>
        </ul>
        <!-- 未支付状态 需要上传凭证 -->
        <el-form v-if="!orderInfo.paid" :rules="rules" size="small" style="margin-top: 10px;">
          <el-form-item :label="$t('page.orderDetails.credentials')" prop="fileList">
            <el-upload
              v-if="orderInfo.offlinePayStatus==='need_pay'||orderInfo.offlinePayStatus==='pay_fail'"
              class="upload"
              ref="upload"
              list-type="picture-card"
              accept=".png,.jpg,jpeg"
              action
              :limit="5"
              :file-list="fileList"
              :auto-upload="true"
              :http-request="handleUploadForm"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :disabled="orderInfo.offlinePayStatus==='doing'"
              v-loading="upLoading"
              >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
            <div class="image__preview" v-else>
              <el-image
                v-for="(item, index) in fileList"
                :key="index"
                style="width: 100px; height: 100px"
                :src="item.url"
                @click="handlePictureCardPreview(item)"
              >
              </el-image>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!--商品信息-->
    <div class="section orderInfo_pro">
      <template v-if="orderStatus === 0">
        <div v-for="(item, index) in orderInfo.orderList" :key="item.id">
          <order-goods :cartInfo="item.orderInfoList" :orderInfo="item"></order-goods>
        </div>
      </template>
      <template v-else>
        <order-goods :cartInfo="cartInfo" :orderInfo="orderInfo"></order-goods>
      </template>
      <div class="line_box">
        <div class="lines"></div>
      </div>
      <div class="section-bd order_price">
        <ul class="cor666 p30">
          <li v-if="!isGoodsReturn" class="acea-row row-middle">
            <div>{{ $t(`page.orderDetails.allPrice`) }}：</div>
            <div>
              <statistic :valueStyle="{color:'#666'}" :value="orderInfo.proTotalPrice" :currency="orderInfo.currency"/>
            </div>
          </li>
          <li v-if="orderInfo.couponId" class="acea-row row-middle coupon">
            <div>{{ $t(`page.orderDetails.coupon`) }}：</div>
            <div>
              <span>-<statistic :valueStyle="{color:'#666'}" :value="orderInfo.couponPrice" :currency="orderInfo.currency"/></span>
            </div>
          </li>
          <li class="acea-row row-middle coupon" v-if="orderInfo.payPostage > 0">
            <div>{{ $t(`page.orderDetails.freight`) }}： </div>
            <div>
              <span><statistic :valueStyle="{color:'#666'}" :value="orderInfo.payPostage" :currency="orderInfo.currency"/></span>
            </div>
          </li>
        </ul>
        <ul class="total cor666">
          <li class="acea-row row-middle row-between">
            <div>
              {{ orderInfo.totalNum }} {{ $t(`page.users.orderList.item`) }}，{{ $t(`page.users.orderList.totalPay`) }}：<span
                class="money"><statistic :value="orderInfo.payPrice" :currency="orderInfo.currency"/></span>
            </div>
            <div class="footerState acea-row row-middle">
              <div class="orderBnt" v-if="orderInfo.paid === true && orderInfo.refundStatus === 0"
                @click="refund(orderInfo.orderNo)">
                {{ $t(`page.orderDetails.refund`) }}
              </div>
              <div class="orderBnt" v-if="!orderInfo.paid&&orderInfo.offlinePayStatus!=='doing'" @click="cancelOrder(orderInfo.orderNo)">
                {{ $t(`page.orderDetails.cancelOrder`) }}
              </div>
              <div class="orderBnt" :class="{
                on: !orderInfo.paid
              }" v-if="!orderInfo.paid&&orderInfo.offlinePayStatus!=='doing'" @click="goPays(orderInfo)">
                <span>{{ $t(`page.orderDetails.nowPay`) }}</span>

              </div>
              <div class="orderBnt" :class="{
                on: orderInfo.status === 1
              }" v-if="orderInfo.status == 1" @click="confirmOrder">
                {{ $t(`page.orderDetails.confirm`) }}
              </div>
              <div class="orderBnt" v-if="orderInfo.status == 3" @click="delOrder(orderInfo.orderNo)">
                {{ $t(`page.orderDetails.delete`) }}
              </div>
              <div class="orderBnt" v-if="orderInfo.status == 3" @click="goOrderConfirm">
                {{ $t(`page.orderDetails.again`) }}
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <el-dialog :visible.sync="previewVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>

// +----------------------------------------------------------------------
import { Message, MessageBox } from "element-ui";
import { goShopDetail, cancelOrders, delOrders, goPay } from '@/utils/order.js';
import { getToken } from '@/utils/auth';
import orderGoods from "@/components/orderGoods";
import { Debounce } from '@/utils/validate.js'
import uploadFrom from "@/components/upload";
export default {
  auth: "guest",
  data() {
    return {
      activeStatus: 1,
      expressInfo: {},
      isReturen: false,
      chatPopShow: false,
      isGoodsReturn: false, //是否为退款订单
      orderData: {},
      goodsNum: 0,
      refundNum: [],
      cartInfo: [],
      expressList: [],
      orderInfo: {},
      offlinePayConfig:{},
      fileList: [],
      rules: {
        fileList: [{ required: true, message: this.$t('rulesCredentials'), trigger: 'blur' }]
      },
      disabled: false,
      dialogImageUrl: '',
      previewVisible: false,
      offlinePayStatusName:{
          doing:this.$t('offlinePayStatusName.doing'),
          pay_fail:this.$t('offlinePayStatusName.pay_fail'),
          need_pay:this.$t('offlinePayStatusName.need_pay'),
          has_pay:this.$t('offlinePayStatusName.has_pay'),
        },
        upLoading:false
    };
  },
  components: { orderGoods,uploadFrom },
  async asyncData({ app, query }) {
    // let orderData = {}
    // if(query.orderStatus === 0){
    //   /**  获取待支付订单详细信息，主订单 */
    //   orderData = await app.$axios.get(`/api/front/order/master/detail/${query.orderNo}`);
    // }else{
    //   /**  分订单详情 */
    //   orderData = await app.$axios.get(`/api/front/order/detail/${query.orderNo}`);
    // }
    return {
      orderStatus: Number(query.orderStatus),
      //  orderInfo: orderData.data,
      //   cartInfo: query.orderStatus === 0 ? orderData.data.orderList : orderData.data.orderInfoList,
      orderNo: query.orderNo,
    };
  },
  head() {
    return {
      title: this.$t(`page.orderDetails.navTitle`)
    }
  },
  beforeMount() {
    if (this.orderStatus === 0) {
      this.getOrderMasterInfo();
    } else {
      this.getOrderInfo();
      this.getExpress();
    }
  },
  methods: {
    /**  获取待支付订单详细信息，主订单 */
    getOrderMasterInfo() {
      this.$axios.get(`/api/front/order/master/detail/${this.orderNo}`).then(res => {
        this.orderInfo = res.data;
        this.cartInfo = res.data.orderList;
        this.activeStatus = 1;
        if(this.orderInfo.payType==='offline'){
          if(this.orderInfo.offlinePayFile){
            const offlinePayFile =JSON.parse(this.orderInfo.offlinePayFile)
            offlinePayFile.forEach(item=>{

              this.fileList.push({
                name:item,
                url:item,
              })
            })
          }

          this.getOfflinePayConfig()
        }
      }).catch(err => {
        this.loading = false;
      })
    },
    // 线下支付 获取收款信息
    getOfflinePayConfig() {
      this.$axios.get(`/api/front/pay/offline_pay_config`).then(res => {
        this.offlinePayConfig = res.data
      })
    },
    /**  获取待支付订单详细信息，分订单 state */
    getOrderInfo() {
      this.$axios.get(`/api/front/order/detail/${this.orderNo}`).then(res => {
        this.orderInfo = res.data
        this.cartInfo = res.data.orderInfoList
        switch (res.data.status) {
          case 0:
            this.activeStatus = 2;
            break;
          case 1:
            this.activeStatus = 3;
            break;
          default:
            this.activeStatus = 4;
        }
      }).catch(err => {
        this.loading = false;
      })
    },
    orderStatusFilter(status) {
      const statusMap = {
        0: this.$t(`page.user.orderStatus[1].name`),
        1: this.$t(`page.user.orderStatus[2].name`),
        2: this.$t(`page.user.orderStatus[6].name`),
        3: this.$t(`page.user.orderStatus[5].name`)
      }
      return statusMap[status]
    },
    /**  申请退款 */
    refund: Debounce(function (orderNo) {
      this.$router.push({
        path: "/users/refund_confirm",
        query: {
          orderNo: orderNo
        }
      });
    }),
    chatShow(mer_id) {
      if (this.$auth.loggedIn) {
        this.mer_id = mer_id;
        this.chatPopShow = true;
      } else {
        this.$store.commit("isLogin", true);
      }
    },
    getExpress() {
      this.$axios.get(`/api/front/order/express/${this.orderNo}`).then(res => {
        this.expressInfo = res.data
        if (res.data && res.data.logisticsInfo) {
          let express = JSON.parse(res.data.logisticsInfo);
          this.$set(this, 'expressList', express.reverse());
        }
      });
    },
    // 取消订单
    cancelOrder: Debounce(function (orderNo) {
      cancelOrders(this, orderNo).then(() => {
        this.$router.replace({ path: '/users/order_list' });
      });
    }
    ),
    //去支付
    goPays: Debounce(function (item) {
      // 线下支付 且未支付状态 要求上传凭证
      if(item.payType==='offline'&& !item.paid){
        if(this.fileList.length>0){

          this.uploadPayFile()
        }else{
          this.$message.error('请上传支付凭证');
        }

      }else{
        goPay(this, item)
      }

    }),
    //确认收货
    confirmOrder: Debounce(function () {
      MessageBox.confirm(
        this.$t(`page.orderDetails.confirmInfo`),
        this.$t(`page.orderDetails.confirm`),
        {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText:this.$t('cancel'),
      }
      ).then(res => {
        this.$axios
          .post(`/api/front/order/take/${this.orderNo}`
          )
          .then(data => {
            Message.success(this.$t(`message.login.operationSU`));
            if (this.orderStatus === 0) {
              this.getOrderMasterInfo();
            } else {
              this.getOrderInfo();
            }
          });
      });
    }),
    //删除订单
    delOrder: Debounce(function ( orderNo) {
      delOrders(this, orderNo).then(() => {
        this.$router.replace({ path: '/users/order_list' });
      });
    }),
    //  再次购买
    goOrderConfirm: Debounce(async function () {
      let storeCartListRequest = []
      this.cartInfo.map(item => {
        storeCartListRequest.push({
          productId: parseFloat(item.productId),
          productAttrUnique: item.attrValueId,
          cartNum: parseFloat(item.payNum)
        })
      })
     await this.$axios.post('/api/front/cart/save', storeCartListRequest)
     await this.$axios.get("/api/front/cart/count?numType=true&type=sum").then(res => {
        this.$store.commit('cartNum', res.data.count);
        this.$router.replace({ path: '/order/shopping_cart' });
      })

    }),
    _copy(context) {
         // 创建输入框元素
         let oInput = document.createElement('input');
          // 将想要复制的值
          oInput.value = context;
          // 页面底部追加输入框
          document.body.appendChild(oInput);
          // 选中输入框
          oInput.select();
          // 执行浏览器复制命令
          document.execCommand('Copy');
          // 弹出复制成功信息
          this.$message.success(this.$t('page.orderDetails.copySuccess'));
          // 复制后移除输入框
          oInput.remove();
    },
    // 上传
    handleUploadForm(param) {
      const formData = new FormData();
      formData.append('multipart', param.file);
      this.upLoading=true
      this.$axios
      .post("/api/front/upload/image?model=order&pid=9", formData)
      .then((res) => {
        this.fileList.push({
          uid:param.file.uid,
          name:res.data.url,
          url:res.data.url,
        })
        this.upLoading=false
      }).catch(()=>{
        this.upLoading=false
      })
    },
    uploadPayFile(){
      const offlinePayFile = []
      this.fileList.forEach(item=>{
        let url = item.url
        let index = url.indexOf(url.split('/')[2])+url.split('/')[2].length
        let fileUrl = url.substring(index+1,url.length)
        offlinePayFile.push(fileUrl)
      })

      this.$axios
      .post("/api/front/order/upload_pay_file", {
        "offlinePayFile": JSON.stringify(offlinePayFile),
        "orderNo": this.orderNo
      })
      .then((res) => {
        this.$router.push('/users/order_list')
      })
    },

    handleChange(file, fileList) {
      this.fileList = fileList
    },
    handleRemove(file, fileList) {
      this.fileList = fileList
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.previewVisible = true;
    }
  }
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/variables.scss';
.p30 {
  padding: 0 30px 24px 30px;
}

.line_box {
  border: none !important;
  padding: 0 30px;

  .lines {
    border-top: 2px dashed #cecece;
  }
}

.stepsBox {
  padding-bottom: 40px;
  border: none !important;

  ::v-deep.el-step__icon.is-text {
    border: none !important;
  }

  .iconfont {
    font-size: 30px;
  }

  ::v-deep.el-step__line {
    width: 220px;
    margin-left: 40px;
    /*border: 2px dashed #86B82D;*/
    /*background: none;*/
    /*height: auto;*/
  }
}

.cor666 {
  color: #666666 !important;
}

.logisticsCon {
  background-color: #FFFBFB;
  padding: 30px;

  .item .text.on {
    border-left-color: #f8c1bd;
  }

  .item .text.on-font {
    color: #333333;
  }

  .item .text {
    font-size: 14px;
    color: #999999;
    border-left: 1px solid #e6e6e6;
    padding: 0 0 60px 38px;
  }

  .item {
    padding: 0 40px;
    position: relative;

    .circular.on {
      color: #86B82D;
    }

    .circular {
      position: absolute;
      top: -7px;
      left: 32px;
      color: #CCCCCC;

      .text.on-font {
        color: red;
      }

      .text .data.on-font {
        color: red;
      }

      .text {
        font-size: 26px;
        color: #666;
        width: 615px;
        border-left: 1px solid #e6e6e6;
        padding: 0 0 60px 38px;
      }

      .text.on {
        border-left-color: #f8c1bd;
      }

      .data {
        font-size: 24px;
        color: #999;
        margin-top: 1rpx;

        .time {
          margin-left: 15px;
        }
      }
    }
  }

}

.orderInfo_pro {
  ::v-deep .order>.list>.cartCount {
    margin-bottom: 0 !important;
  }
}

.section {

  ::v-deep.el-collapse,
  :v-deep.el-collapse-item__header {
    border: none !important;
    /*height: 60px;*/
    /*line-height: 60px;*/
  }

  ::v-deep.el-collapse-item__header.is-active,
  ::v-deep.el-collapse-item__wrap,
  ::v-deep.el-collapse-item__header {
    padding: 0 30px;
    border: none;
  }
}

.order-detail {
  .header {
    color: #999999;
    font-size: 14px;
    background-color: unset;
    padding: 15px 0;

    .home {
      color: #282828;
    }
  }

  >div {
    background-color: #ffffff;

    .process {
      margin-top: 0;

      div {
        border-top: none;

        &.section-hd {
          padding: 26px 22px 0;
        }

        ul {
          padding: 27px 0 94px;

          &::after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
          }
        }

        li {
          position: relative;
          float: left;
          margin-top: 0;
          margin-left: 222px;

          &:first-child {
            margin-left: 111px;
          }

          .line {
            position: absolute;
            top: 50%;
            left: 16px;
            width: 226px;
            height: 4px;
            background: #c7c7c7;
            transform: translateY(-50%);
          }

          .iconfont {
            position: relative;
            width: auto;
            font-size: 18px;
            line-height: 1;
            color: #c7c7c7;

            +.iconfont {
              position: absolute;
              top: 50%;
              left: 50%;
              display: none;
              width: 40px;
              height: 40px;
              border: 4px solid #86B82D;
              border-radius: 50%;
              background: #ffffff;
              transform: translate(-50%, -50%);
              font-size: 20px;
              line-height: 32px;
              text-align: center;
              color: #86B82D;
            }
          }

          .arrow {
            position: absolute;
            top: 50%;
            left: 100%;
            display: none;
            width: 80px;
            height: 16px;
            background: #86B82D;
            transform: translateY(-50%);

            &::after {
              content: "";
              position: absolute;
              top: 0;
              left: 100%;
              border-width: 8px;
              border-style: solid;
              border-color: transparent transparent transparent #86B82D;
            }
          }

          .info {
            position: absolute;
            top: 42px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 14px;
            text-align: center;
            color: #9a9a9a;
            width: 100px;

            div {
              &:first-child {
                margin-bottom: 4px;
                font-size: 16px;
                color: #282828;
              }
            }
          }

          &.past {
            .line {
              background: rgba(233, 51, 35, 0.6);
            }

            .iconfont {
              color: #86B82D;
              font-weight: bold;
              font-size: 22px;
              left: -3px;
            }
          }

          &.now {
            .info {
              div {
                &:first-child {
                  color: #86B82D;
                }
              }
            }

            .iconfont {
              +.iconfont {
                display: block;
              }
            }

            .arrow {
              display: block;
            }
          }
        }
      }
    }

    &.order-number {
      li {
        div {
          &:nth-child(2) {
            flex: none;
          }
        }

        a {
          margin-left: 30px;
          font-size: 16px;
          color: #236fe9;

          .iconfont {
            font-size: 12px;
          }
        }
      }
    }

    ~div {}

    >div {
      ~div {
        border-top: 2px dashed #cecece;
      }
    }

    .presell-hd {
      div {}
    }

    &.reject {
      position: relative;
      padding: 30px 22px;
      background: #666666;
      overflow: hidden;
      margin-top: 0;

      .iconfont {
        position: absolute;
        top: -20px;
        right: 28px;
        font-size: 112px;
        color: #818181;
      }

      div {
        border-top: none;

        &.section-hd {
          padding: 0;
          font-weight: bold;
          color: #ffffff;
        }

        ul {
          padding: 0;
          margin-top: 8px;
          font-size: 14px;
          color: #ffffff;
        }
      }
    }

    &.reason {
      padding: 26px 22px;

      div {
        border-top: none;

        &.section-hd {
          padding: 0;

          .iconfont {
            margin-right: 8px;
          }
        }

        ul {
          padding: 0;
          margin-top: 15px;
          color: #7e7e7e;
        }
      }
    }
  }

  .virtual_image {
    display: flex;
    align-items: center;

    img {
      width: 70px;
      height: 70px;
      border-radius: 4px;
    }
  }

  .delivery-hd {
    display: flex;
    justify-content: space-between;

    .morebtn {
      color: #236FE9;
      font-size: 16px;
    }
  }

  .delivery-info {
    display: flex;
    align-items: center;
    padding: 20px 22px;

    img {
      width: 40px;
      height: 40px;
    }

    .delivery-detail {
      margin-left: 20px;

      span {
        margin-right: 10px;
      }
    }
  }

  .section-hd {
    padding: 20px 30px;
    font-size: 16px;
    color: #666666;
    position: relative;

    .qrcode {
      box-shadow: 0px 3px 16px rgba(0, 0, 0, 0.08);
      background: #fff;
      position: absolute;
      right: 0;
      top: 30px;
      z-index: 10;
      display: none;
      padding: 6px;

      img {
        width: 100%;
        display: block !important;
      }
    }

    .orderBnt {
      color: #86B82D;
      font-size: 18px;
      position: absolute;
      right: 20px;
      top: 20px;
      cursor: pointer;

      &:hover {
        .qrcode {
          display: block;
        }
      }

      .iconfont {
        font-size: 20px;
      }
    }
  }

  .order_price {
    padding: 30px 0 !important;
    border: none !important;
  }

  .section-bd {
    padding: 30px;

    ul {
      font-size: 14px;
      color: #333;

      ~ul {
        border-top: 2px dashed #cecece;
      }
    }

    li {
      .time {
        margin-left: 10px;
      }

      ~li {
        margin-top: 20px;
      }


      &.coupon {
        span {
          ~span {
            margin-left: 18px;
          }
        }
      }
    }

    .money {
      color: $user--color-price;

      b {
        font-weight: normal;
        font-size: 14px;
      }
    }

    .goods {
      .info {
        font-size: 12px;
        color: #aaa;
        margin-top: 4px;
      }

      li {
        position: relative;

        ~li {
          margin-top: 22px;
        }

        >div {
          .img-box {
            width: 86px;
            height: 86px;
            overflow: hidden;
            margin-right: 26px;
            position: relative;

            span {
              display: block;
              width: 100%;
              text-align: center;
              font-size: 12px;
              line-height: 18px;
              background: rgba(0, 0, 0, .5);
              position: absolute;
              left: 0;
              bottom: 0;
              color: #fff;
            }

            img {
              display: block;
              width: 100%;
              height: 100%;
            }
          }

          del {
            margin-left: 12px;
            font-size: 14px;
            color: #919191;
          }

        }

        .money_count {
          margin-top: 4px;
          color: #b1b1b1;
        }

        .store-box {
          width: 700px;

          .name {
            max-width: 500px;
          }
        }

        .presell_num {
          color: #b1b1b1;
        }
      }

      .develity_date {
        color: #FD6523;
        font-size: 12px;
      }
    }

    .total {
      padding: 30px 30px 0 30px;

      .footerState {
        cursor: pointer;
      }

      .service {
        width: 114px;
        height: 40px;
        margin-left: 18px;
        background: #86B82D;
        color: #fff;
        font-size: 16px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
      }

      div {
        &:first-child {
          width: auto;
        }

        &:last-child {
          flex: none;

          div {
            ~div {
              border-left: 1px solid #cecece;
            }
          }

          .orderBnt {
            height: 36px;
            background: #FFFFFF;
            border-radius: 4px;
            border: 1px solid #999999;
            padding: 0 20px;
            background: none;
            outline: none;
            font-size: 14px;
            line-height: 36px;
            text-align: center;
            color: #666666;
            cursor: pointer;
            margin-left: 15px;

            ~.orderBnt {
              &:last-child {
                border-color: $user--color-primary;
                background: $user--color-primary;
                color: #ffffff;
              }
            }

            &.on {
              border-color: $user--color-primary;
              background: $user--color-primary;
              color: #ffffff;
            }
          }
        }
      }
    }
  }
}

.operate_btn {
  display: flex;
  position: absolute;
  right: 0;
  color: #B1B1B1;
  align-items: center;

}

.presell_process {
  margin-top: 20px;

  .process_count {
    background: #FFF8F7;
    padding: 21px 20px;

    >div {
      color: #282828;
      width: 60%;
    }
  }

  .mt10 {
    margin-top: 10px;
  }

}

.evaluate_btn {
  margin-left: 15px;
}
.image__preview{
  .el-image+.el-image{
    margin-left: 15px;
  }
}
</style>
